<template lang="html">
  <div class="view">
      <div class="echarts_view_1" v-loading="loading">
          <div class="filter_view">
              <div class="tabs_view">
                  <el-tabs v-model="tabsType" @tab-click="handleTab">
                      <el-tab-pane label="定制收发" name="1"></el-tab-pane>
                      <el-tab-pane label="大货收发" name="2"></el-tab-pane>
                  </el-tabs>
              </div>
          </div>

          <div class="content">
              <div class="search">
                  <div class="f_view">
                    <datePicker startEndTime @onFilter="onFilter" />&nbsp;&nbsp;
                    <span>统计时间：{{statisTime}}</span>
                  </div>
                  <div class="export_excl">
                    <el-button size="small" @click="exportExcl" type="primary">导出<i class="el-icon-upload el-icon--right"></i></el-button>
                  </div>
              </div>

              <div class="tables">
                  <div class="tab_view">
                      <div class="tab_tr" style="width:160px;">
                          <div class="tab_td tab_th">
                            <span>数据</span>
                            <span>类型</span>
                          </div>
                          <div class="tab_td __blue">定制到货(件)</div>
                          <div class="tab_td __blue">验收未通过(件)</div>
                          <div class="tab_td __blue">返厂(件)</div>
                          <div class="tab_td __blue">占到货比(%)</div>
                          <div class="tab_td __blue">与上期对比</div>
                          <div class="tab_td __blue">定制发货(件)</div>
                          <div class="tab_td __blue">定制结余(件)</div>
                      </div>
                      <div class="tab_tr" v-for="(item,index) in tableData" :key="index">
                          <div class="tab_td">{{item.typeName}}</div>
                          <div class="tab_td ">{{item.costmeCount}}</div>
                          <div class="tab_td ">{{item.noYsCount}}</div>
                          <div class="tab_td ">{{item.reworkCount}}</div>
                          <div class="tab_td ">{{item.costmeRatio=="0"?'0':item.costmeRatio+"%"}}</div>
                          <div class="tab_td ">{{item.contrast}}</div>
                          <div class="tab_td ">{{item.sendCount}}</div>
                          <div class="tab_td">{{item.balanceCount}}</div>
                      </div>

                  </div>
              </div>

          </div>


      </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
        tabsType: '1',
        loading: false,
        searchText: '',
        statisTime: '',
        date: [],
        year: '',
        month: '',
        day: '',
        tableData: [],
        currentData: [],
    }
  },
  created(){
    this.getServeData();
  },
  methods:{
    getServeData(){
      this.loading = true;
      this.$http.selectDataStatsCustomDetail({
        startTime: (this.date&&this.date[0]) || '',
        endTime: (this.date&&this.date[1]) || '',
        dayTime: this.day,
        monthTime: this.month,
        yearTime: this.year,
      })
      .then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.tableData = res.data.data;
        }
      });
    },

    getServeData2(){
      this.loading = true;
      this.$http.selectDataStatsDHDetail({
        startTime: (this.date&&this.date[0]) || '',
        endTime: (this.date&&this.date[1]) || '',
        dayTime: this.day,
        monthTime: this.month,
        yearTime: this.year,
      })
      .then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.tableData = res.data.data;
        }
      });

    },

    handleTab(){
      if(this.tabsType == 1){
        this.getServeData();
      }else{
        this.getServeData2();
      }
    },

    onFilter(e){
      this.statisTime = e.val;
      this.date = [];
      this.year = '';
      this.month = '';
      this.day = '';
      switch (e.key) {
        case 1: this.day = e.val; break;
        case 2: this.month = e.val; break;
        case 3: this.year = e.val; break;
        case 4:
            this.date = [...e.val];
            if(e.val[0]) this.statisTime = `${e.val[0]} - ${e.val[1]}`;
            else this.statisTime = '';
        break;
      }
      this.handleTab()
    },
    exportExcl(){
      this.$confirm('确定要导出吗？').then(()=>{
        if(this.tabsType == 1){
          this.$http.selectDataStatsCustomDetailExport({
            startTime: (this.date&&this.date[0]) || '',
            endTime: (this.date&&this.date[1]) || '',
            dayTime: this.day,
            monthTime: this.month,
            yearTime: this.year,
          })
        }else{
          this.$http.selectDataStatsDHDetailExport({
            startTime: (this.date&&this.date[0]) || '',
            endTime: (this.date&&this.date[1]) || '',
            dayTime: this.day,
            monthTime: this.month,
            yearTime: this.year,
          })
        }
      }).catch(e=>0);
    }

  }
}
</script>

<style lang="css" scoped>
.active{
  color: #FFF;
  background-color: #409EFF;
  border-color: #409EFF;
}
.tabs_view{
  background: #fff;
  padding: 0 20px;
}
.filter_view{
  margin-bottom: 20px;
}
.content{
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: #fff
}
.echarts_view_1 .f_view{
  display: flex;
  align-items: center;
}
.f_view span{
  font-size: 14px;
  color: #656565;
}
.buttons{
  margin-left: 30px;
}
.search{
  display: flex;
  position: relative;
  margin-bottom: 20px;
}
.export_excl{
  position: absolute;
  right: 0
}
.tab_view{
  border-top: 1px solid #E8E8E8;
  border-left: 1px solid #E8E8E8;
  display: flex;
}
.tab_tr{
  width: 100%;
}
.tab_td{
  width: 100%;
  line-height: 80px;
  text-align: center;
  font-size: 14px;
  color: #666;
  border-right: 1px solid #E8E8E8;
  border-bottom: 1px solid #E8E8E8;
  box-sizing: border-box;
}
.__blue{
  background:rgba(65,150,255,0.2);
}
.tab_th{
  width: 160px;
  height: 81px;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.tab_th span:nth-child(1){
  position: absolute;
  left: 30px;
  top: -15px;
}
.tab_th span:nth-child(2){
  position: absolute;
  right: 30px;
  top: 15px;
}
.tab_th::before{
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  position: absolute;
  top: 50%;
  transform: rotate(-27deg) scale(1.11);
}
</style>
